import QtQuick 2.3
import "qrc:///Constants.js" as Constants

FocusScope
{
    id: focusScope;

    width: 400;
    height: Constants.textInputHeight;

    property alias value: textInput.text;
    property string placeHolder: "Type something...";
    property string textColor: Constants.textInputFontColor
    property string backgroundColor: Constants.textInputBackgroundColor
    property string borderColor: Constants.textInputBackgroundColor
    property int borderWidth : 0
    property int echoMode : TextInput.Normal

    Rectangle
    {
        id: background

        anchors.fill: parent;
        color: parent.backgroundColor
        radius: 2
        antialiasing: true
        border.color: parent.borderColor
        border.width: borderWidth
    }

    TextInput
    {
        id: textInput

        font.pointSize: Constants.textInputFontSize
        font.family: Constants.textInputFontFamily
        color: parent.textColor
        font.bold: true
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.right: parent.right
        anchors.rightMargin: 15
        anchors.verticalCenter: parent.verticalCenter
        echoMode: parent.echoMode
    }

    Text
    {
         id: placeHolder

         text: focusScope.placeHolder
         color: parent.textColor
         opacity: (value === "" ? 1.0 : 0.0);
         font.family: Constants.textInputFontFamily
         font.pointSize: Constants.textInputFontSize
         font.italic: true
         anchors.left: parent.left
         anchors.leftMargin: 15
         anchors.right: parent.right
         anchors.rightMargin: 15
         anchors.verticalCenter: parent.verticalCenter

         Behavior on opacity { NumberAnimation { duration: 100; } }
     }

    MouseArea
    {
        visible: (!focusScope.activeFocus);
        anchors.fill: parent
        onClicked: { textInput.forceActiveFocus(); }
    }

    Text
    {
         id: clear;

         text: "\u2717" // 'x' //"\u2713"
         color: parent.textColor
         font.pixelSize: 20
         opacity: (value !== "" ? 1.0 : 0.0);
         anchors
         {
             right: parent.right;
             bottom: parent.bottom;
             margins: 5;
         }

         Behavior on opacity { NumberAnimation { duration: 100; } }

         MouseArea
         {
            anchors.fill: parent
            onClicked:
            {
                value = "";
                focusScope.focus = false;
            }
        }
    }
}
